<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Verification</title>
    <link href="../CSS/tailwind.min.css" rel="stylesheet" />
  </head>
  <body>
    <password-component></password-component>
        <script>
      // Define shared Tailwind CSS classes
      const inputClasses = "w-full p-2 rounded-lg bg-gradient-to-r from-gray-300 to-white to-gray-400 text-black";
      const buttonClasses = "w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700";
      const H1Classes = "text-2xl font-bold text-white text-center mb-4";


      // Short URL Component
      customElements.define('password-component', class extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
                      <div class="min-h-screen bg-gradient-to-r from-blue-900 to-black flex items-end justify-start p-4 relative">
              <div class="bg-gradient-to-br from-blue-500 to-blue-300 p-6 rounded-xl shadow-lg w-96">
        <form class="space-y-4" method='post' action=''>
        <h1 class="${H1Classes}">输入密码进行跳转 - Enter password to redirect</h1>
        <div>
        <label class="block text-white mb-1" for='password'>Password:</label>
        <input class="${inputClasses}" type='password' name='password' id='password' required>
         </div>
        <input type='submit' value='Submit'>
    </form>
          `;
        }
      });
    </script>
</body>
</html>

